<template>

  <div>

    <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
      <el-tab-pane label="新增流程" name="first" :disabled="diyibu">

        <el-form  v-model="addflowNameData" label-width="80px" >

          <el-form-item label="流程名称">
            <el-input v-model="addflowNameData.fname" placeholder="流程名称"></el-input>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="addFlownameBtn">提交</el-button>
          </el-form-item>

        </el-form>

      </el-tab-pane>
      <el-tab-pane label="流程线配置" name="second" :disabled="dierbu">



        <el-form :model="conforderform" ref="conforderform" label-width="100px" >

          <el-form-item label="审批节点" >
            <!-- 渲染问题列表 -->
            <section v-for="(value, index) in conforderform.lastquestions" :key="index">
              <section v-if="index === 0">
                <el-row>
                  <el-col :span="15">
                    <!--                  <el-input v-model="conforderform.lastquestions[index]" placeholder="请输入上次所提议题" clearable @keyup.enter.native="addlastitems(index)"/>-->
                    <el-select v-model="conforderform.lastquestions[index]" clearable placeholder="请选择">
                      <el-option
                          v-for="node in flowNodeData"
                          :key="node.id"
                          :label="node.nodeName"
                          :value="node.id">
                      </el-option>
                    </el-select>

                  </el-col>
                  <el-col :span="4">
                    <el-button type="primary" icon="el-icon-plus" plain style="margin-left:10px;" circle @click="addlastitems(index, '1')"/>
                  </el-col>
                </el-row>
              </section>
              <section v-if="index > 0">
                <!-- 添加的子项目 -->
                <el-row style="margin-top:10px;">
                  <el-col :span="15">
                    <!--                  <el-input v-model="conforderform.lastquestions[index]" placeholder="请输入上次所提议题" clearable @keyup.enter.native="addlastitems(index, '1')"/>-->



                    <el-select v-model="conforderform.lastquestions[index]" clearable placeholder="请选择">
                      <el-option
                          v-for="node in flowNodeData"
                          :key="node.id"
                          :label="node.nodeName"
                          :value="node.id">
                      </el-option>
                    </el-select>



                  </el-col>
                  <el-col :span="4">
                    <el-button type="danger" icon="el-icon-delete" plain style="margin-left:10px;" circle @click="rmlastitems(index, '1')"/>
                  </el-col>
                </el-row>
              </section>
            </section>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="addLineBtn">提交</el-button>
          </el-form-item>

        </el-form>


      </el-tab-pane>

    </el-tabs>






  </div>


</template>

<script>
export default {
  name: "AddFlowName",
  data(){
    return{
      addflowNameData:{
        fid:"",
        fname:""
      },
      activeName:"first",
      conforderform: {
        lastquestions: [''], // 上次所提议题 下标控制框框个数
      },
      flowNodeData:[],
      diyibu:false,
      dierbu:true

    }
  },
  created() {
    this.getFlowNode()
  },
  methods:{
    handleClick(){}, // 控制Tabs
    addFlownameBtn(){ //添加审批名称处理

      const loading = this.$loading({
        lock: true,
        text: '正在载入...',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });

      this.$http.post("flownames" ,this.addflowNameData
      )
          .then(res => {

            setTimeout(() => {
              loading.close();
            });

            this.addflowNameData.fid=res.data.data
            //成功后把第一步禁用，第二步开启
            this.diyibu=true
            this.dierbu=false

            //成功后转到流程线配置
            this.activeName = "second"
          })
          .catch(res => {
            console.log(res)
          })

    },
    // 添加审批节点
    addlastitems(index, type) {
      if (type === '1') {
        const lastitem = this.conforderform.lastquestions[this.conforderform.lastquestions.length - 1]
        if (lastitem === '' ) {
          this.$message.error('请您填写完一项后继续追加')
        } else {
          this.conforderform.lastquestions.push('')
        }
      }
    },
    rmlastitems(index, type) {
      switch (type) {
        case '1':
          this.conforderform.lastquestions.splice(index, 1)
          break
        default:
          break
      }
      this.$message.success('移除成功')
    },
    addLineBtn(){//流程节点

      const loading = this.$loading({
        lock: true,
        text: '正在载入...',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });


      // eslint-disable-next-line no-unused-vars
      const flownameVo = {
        "fid":this.addflowNameData.fid,
        "list":this.conforderform.lastquestions
      }

      this.$http.post("flowlines" , flownameVo)
          .then(() => {

            setTimeout(() => {
              loading.close();
            });

            // console.log(res)
            this.$message({
              message: '添加成功!',
              type: 'success'
            });
            this.$emit("addOK")
          })
    },
    getFlowNode(){//查询流程审批人

      const loading = this.$loading({
        lock: true,
        text: '正在载入...',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });

      this.$http.get("flownodes")
          .then(res => {

            setTimeout(() => {
              loading.close();
            });

            // console.log(res.data.data)
            this.flowNodeData=res.data.data
          })
    }
  }



}
</script>

<style scoped>

</style>